<template>
  <!-- 销货单明细 -->
  <div class="financeDetails">
    <serchForm
      :Form="financeForm"
      :FormLabel="financeFormLabel"
      @onSearch="onSearch"
    />
    <el-button
      class="visitBtn"
      @click="visitFn"
      v-if="checkPermi(['system:order:edit'])"
    ><i class="iconfont icon-daochu"></i>
      导出
    </el-button>
    <div>
      <label v-if="!showAll"> 总金额：<span style="color: rgb(21, 236, 50);">{{ totalAmount.toFixed(2) }} </span> 元</label>
      <label v-else> 勾选总金额：<span style="color: rgb(21, 236, 50);">{{ totalOrderAmount.toFixed(2) }} </span> 元</label>
    </div>

    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      :tableHeaderData="financeTableHeaderData"
      :tableData="financeTableData"
      @tableDetail="tableDetail"
    >
      <template
        scope="data"
        v-if="checkPermi(['system:order:edit'])"
      >
        <!-- 修改插槽 -->
        <p
          @click="seeUpdate(scope)"
          style="color: #31CA79;"
        >修改</p>
        <!-- v-show="props.detailsBtnFlag && props.auditEdit && props.todoEdit" -->
      </template>

    </forTableCom>
    <PopUps
      v-if="uptatePop"
      widthMy='60%'
      height-my="78%"
    >
      <!-- 修改弹窗 -->
      <OrderUpdate
        @closeUptatePop="closeUptatePop"
        :rowDataUpdate="rowDataUpdate"
      ></OrderUpdate>
    </PopUps>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { selectProductionListApi, createVoucherApi, selectTotalAmountApi } from '@/api/finance'
import OrderUpdate from '@/components/My/OrderUpdate/index.vue'

import { checkPermi } from "@/utils/permission.js";
import { getInfoApi } from '@/api/tickets'
import PopUps from '@/components/My/PopUps/index.vue'
import dayjs from 'dayjs'

const { proxy } = getCurrentInstance()

const showAll = ref(false)

let totalOrderAmount = ref(0)
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 修改工单信息
let rowDataUpdate = ref(null)
// 勾选激活行的背景色
const idActive = 'orderId'
let uptatePop = ref(false)
// 表单
let financeForm = ref(
  {
    orderDate: '',
    orderId: '',
    customerId: '',
    customerStore: '',
    creator: '',
    deptId: '',
  }
)
// 表单数据标题
let financeFormLabel = ref([
  {
    name: 'orderDate',
    label: '单据日期',
    type: 'datetimerange'
  },
  {
    name: 'orderId',
    label: '单据编号',
  },
  {
    name: 'invoiceStatus',
    label: '单据状态'
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer'
  },
  {
    name: 'customerStore',
    label: '终端门店'
  },
  {
    name: 'creator',
    label: '制单人'
  },
  {
    name: 'designerMingcheng',
    label: '设计人员',
  },
  {
    name: 'deptId',
    label: '部门',
    type: "department"
  },
])

// 表格表头数据
let financeTableHeaderData = ref([

  {
    prop: 'orderDate',
    label: '单据日期',
    width: 200,
  },

  {
    prop: 'orderId',
    label: '单据编号',
    width: 200,
  },
  {
    prop: 'invoiceStatus',
    label: '单据状态',
    minwidth: 100
  },
  {
    prop: 'customerName',
    label: '客户名称',
    width: 160,
  },
  {
    prop: 'creator',
    label: '制单人'
  },
  {
    prop: 'designerMingcheng',
    label: '设计人员',
    minwidth: 100
  },
  {
    prop: 'deptName',
    label: '部门',
    width: 140,

  },
  {
    prop: 'null',
    label: '整单结算',
    width: 120,
  },
  {
    prop: 'customerStore',
    label: '终端门店',
    width: 160,
  },
  {
    prop: 'contactPerson',
    label: '联系人'
  },
  {
    prop: 'productName',
    label: '存货名称',
    width: 120,

  },
  {
    prop: 'productionContent',
    label: '制作内容',
    width: 120,

  },
  {
    prop: 'width',
    label: '宽'
  },
  {
    prop: 'height',
    label: '高'
  },
  {
    prop: 'quantityPerPiece',
    label: '件数'
  },
  {
    prop: 'totalQuantity',
    label: '数量'
  },
  {
    prop: 'salePrice',
    label: '销售单价',
    width: 120,

  },
  {
    prop: 'amount',
    label: '销售金额',
    width: 120,

  },
  {
    prop: 'price',
    label: '成本单价',
    width: 120,

  },
  {
    prop: 'salePriceAll',
    label: '成本金额',
    width: 120,

  },
  {
    prop: 'invoiceStatus',
    label: '单据状态',
    width: 120,

  },
  {
    prop: 'materialFee',
    label: '材料费'
  },
  {
    prop: 'installationFee',
    label: '安装费（固定）',
    width: 160,

  },
  {
    prop: 'installationFee2',
    label: '安装费（按天）',
    width: 160,

  },
  {
    prop: 'urbanManagementFee',
    label: '城管费合计',
    width: 160,

  },
  {
    prop: 'remarks',
    label: '备注'
  },

])

// 表格数据内容
let financeTableData = ref([
  {
    orderDate: '1',
    orderId: '1',
    customerId: '1',
    creator: '',
    deptName: '',
    designDrawings: '',
    customerStore: '',
    contactPerson: '',
    productId: '',
    productionContent: '',
    width: '',
    height: '',
    quantityPerPiece: '',
    totalQuantity: '',
    salePrice: '',
    price: '',
    salePriceAll: '',
    totalOrderAmount: '',
    invoiceStatus: '',
    materialFeeTotal: '',
    installationFeeTotal: '',
    urbanManagementFee: '',
    remarks: '11',
  }
])
// 关闭修改模态框
const closeUptatePop = (flag) => {
  uptatePop.value = flag
}
// 详情双击行
const tableDetail = async (props) => {
  // console.log(props);
  // let params = {
  //   id:props.orderId
  // }
  // let res = await getInfoApi(params)

  // rowDataUpdate.value = props
  // uptatePop.value = true

}

let totalAmount = ref(0)
// 接口
const selectProductionListApiFn = async (data) => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let { code, rows, total } = await selectProductionListApi(params)
  if (code == 200) {
    financeTableData.value = rows
    totals.value = total

    const { aaa, bbb, ...rest } = params
    totalAmount.value = await selectTotalAmountApi(rest)
  }
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit

  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value
  }
  params.orderDate = null

  selectProductionListApiFn(params)

  const { aaa, bbb, ...rest } = params
  totalAmount.value = selectTotalAmountApi(rest)
  // selectTotalAmountApi(rest).then(res => {
  //   totalAmount.value = res
  // })
}
// 修改工单信息
const seeUpdate = (list) => {
  rowDataUpdate.value = list.row
  uptatePop.value = true




  // let oldTime = {}
  // oldTime.year = rowDataUpdate.value.deliveryDate.slice(0, 4)
  // oldTime.month = rowDataUpdate.value.deliveryDate.slice(5, 7)

  // if (!whenMouth(oldTime)) {
  //   uptatePop.value = true
  // } else {
  //   proxy.$modal.msgWarning('非本月工单不能修改');
  // }
}
let orderDateLte = ref(null)
let orderDateGte = ref(null)
let searchData = ref(null)
// 查找suppliersName
const onSearch = (v) => {
  orderDateLte.value = v.orderDate[0]
  orderDateGte.value = dayjs(v.orderDate[1]).subtract(1, 'second').format('YYYY-MM-DD HH:mm:ss')
  let params = {
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...v
  }
  params.orderDate = null
  pageNum.value = 1
  searchData.value = v
  selectProductionListApiFn(params)
}

const handleSelectionChange = (v) => {
  let sum = 0
  v.forEach(item => {
    sum += Number(item.amount)
  })
  totalOrderAmount.value = sum

  if (v.length > 0) {
    showAll.value = true
  } else {
    showAll.value = false
  }
}

// 导出
const visitFn = () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: 10000,
    orderDateLte: orderDateLte.value,
    orderDateGte: orderDateGte.value,
    ...searchData.value
  }
  params.orderDate = null
  /** 导出按钮操作 */
  proxy.download("system/work/exportProductionList", {
    ...params,
  }, `config_${new Date().getTime()}.xlsx`);
  orderDateLte.value = ''
  orderDateGte.value = ''
}
onMounted(() => {
  selectProductionListApiFn()
})
</script>

<style scoped lang="scss">
.financeDetails {
  padding: 16px;
}
</style>